<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div> -->
    <h1>{{ title }}</h1>
    <ul>
      <!-- 展示购物车列表 -->
      <li v-for="(item,index) in cartlist1" :key="item.id">
        {{ item.title }}--￥{{ item.price }}
        <button @click="addcart(index)">添加购物车</button>
      </li>
    </ul>

    <!-- 使用组件 -->
    <my-cart  :title="title"></my-cart>
    <router-view />
  </div>
</template>
<script>
// 引入组件1
import myCart from "./components/cart";
export default {
  // 引入组件2
  components: {
    myCart,
  },
  data() {
    return {
      cartlist1:[],
      // cartlist1: [
      //   { id: 1, title: "vue实战开发", price: 188, active: true, count: 1 },
      //   { id: 2, title: "react实战开发", price: 288, active: true, count: 1 },
      // ],
      title: "购物车",
    };
  },
  methods: {
    addcart(i){
      const good = this.cartlist1(i)
      // 实现通信
      this.$bus.$emit('addcart',good);
    }
  },
  async created (){
  //   this.$http.get('/api/cartlist1')
  //   .then(res => {
  //     console.log(res)
  //     this.cartlist1 = res.data.result
  //   }).catch(err => {
  //     console.log(err)
  //   })

  try {
    const res = await this.$http.get ('/api/cartlist1')
    this.cartlist1 = res.data.result
  } catch (error) {
    console.log(error)
  }
  }

};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
